<template>
    <div class="goods-page" v-if="goods">
        <div class="container">
            <!-- 面包屑 -->

            <el-breadcrumb :separator-icon="ArrowRight" class="el-breadcrumb">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>{{ goods.categoryId.categoryName }}</el-breadcrumb-item>
                <el-breadcrumb-item>{{goods.categorySubId.categorySubName}}</el-breadcrumb-item>
                <el-breadcrumb-item>{{goods.name}}</el-breadcrumb-item>
            </el-breadcrumb>



            <!-- 商品信息 -->
            <div class="goods-info">
                <div class="media">
                    <!-- 图片 -->
                    <GoodsImg :images="picArray" />
                    
                    <!-- 销售数据--暂时写死的 -->
                    <GoodsSales />
                </div>
                <div class="spec">
                    <!-- 名字 -->
                    <GoodsName :goods="goods" />
                    <!-- 规格 -->
                    <!-- <GoodsSku :goods="goods" /> -->
                    <!-- 数量 -->
                    <XtxNumbox label="数量" v-model="num" :max="goods.count" class="xnum"/>
                    <!-- 按钮 -->
                    <XtxButton type="primary"  style="margin-top:20px;" class="xbutton" @click="insertCart" >加入购物车</XtxButton>
                    <XtxButton type="primary"  style="margin-top:20px;" class="xbutton">立即购买</XtxButton>
                </div>
            </div>
            <!-- 同款推荐 -->
            <!-- <GoodsRelevant :goodsId="goods.id" /> -->
            <!-- 商品详情 -->
            <div class="goods-footer">
                <div class="goods-article">
                    <!-- 商品详情 + 商品评价 -->
                    <!-- <GoodsTabs :goods="goods" /> -->
                    <!-- 注意事项 -->
                    <div class="goods-warn"></div>
                </div>
                <!-- 24热榜+专题推荐 -->
                <div class="goods-aside">
                    <!-- <GoodsHot :goodsId="goods.id" :type="1" /> -->
                    <!-- <GoodsHot :goodsId="goods.id" :type="2" /> -->
                </div>
            </div>
            <!-- 注意事项 -->
            <GoodsWarn />
        </div>
    </div>
</template>

<script setup>
import { provide, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import GoodsImg from './components/goods-img.vue';
import GoodsSales from './components/goods-sales.vue';
import GoodsName from './components/goods-name.vue';
import GoodsWarn from './components/goods-warn.vue';
import http from '../../utils/http';
import { ArrowRight } from '@element-plus/icons-vue'
import Message from '@/components/library/Message';
import {userStore} from '@/store/user.js'

    const route = useRoute()
    const goods = ref(null)
    const num = ref(1)
    const picArray = ref([])
    const user = userStore();
    // 出现路由地址商品ID发生变化，但是不会重新初始化组件
    watch(() => route.params.id, (newVal) => {
        if(newVal && route.path === '/product/' + newVal) {
            http.get("/api/goods/id/"+newVal).then((response) => {
                goods.value = response.data
                console.log(goods.value)
                picArray.value = response.data.photoUrl.split(",")
            })
        }
    }, { immediate: true})
    
    provide('goods', goods)


    const insertCart = () => {
        console.log(user.userInfo.id)
        http.post("/api/cart/addCart/",{
            goodsId:goods.value.id,
            goodsCount:num.value,
            userId:user.userInfo.id
        }).then((response) => {
            if(response.data){
                Message({ type: 'success', text: '加入购物车成功',showClose:true})
            }else{
                Message({ type: 'error', text: '加入购物车失败',showClose:true})
            }
        })
    
    }

    // const insertOrders = () => {
    //     http.post("/api/orders/",{

    //     })
    // }


</script>

<style lang="less" scoped>
.el-breadcrumb{
    margin: 30px 0px;
}
.xnum{
    margin: 20px 0px;
}
.xbutton{
    margin: 0px 20px;
}
.goods-info {
  min-height: 600px;
  background: #fff;
  display: flex;
  .media {
    width: 580px;
    height: 600px;
    padding: 30px 50px;
  }
  .spec {
    flex: 1;
    padding: 30px 30px 30px 0;
  }
}
.goods-footer {
    display: flex;
    margin-top: 20px;
    .goods-article {
    width: 940px;
    margin-right: 20px;
    }
    .goods-aside {
        width: 280px;
        min-height: 1000px;
    }
}

</style>